const path = require('path')
const webpack = require('webpack')

module.exports = {
  mode: 'production',
  entry: {
    main: './src/foo',
    vendor: ['react']
  },
  output: {
    path: path.resolve(__dirname, 'dist'),
    // 这里使用chunkhash而不用hash,是为了保证抽取公用代码时，
    // 只要公用代码不改变，它对应打包时的hash也不变，
    // 只有对应的代码块改变时，才会改变hash值，以此达到长缓存的目的
    filename: '[name].[chunkhash].js'
  },
  plugins: [
    // 解决业务代码引入新的模块或模块顺序的变化时时，公用代码包的chunkhash发生改变
    new webpack.NamedChunksPlugin(),
    new webpack.NamedModulesPlugin()
  ],
  // 通过分割公用代码，时每次打包时vendor的chunkhash不变，
  // 而只有业务代码的chunkhash发生改变
  optimization: {
    splitChunks: {
      cacheGroups: {
        vendor: {
          priority: 10,
          name: 'vendor',
          chunks: "all",
          minChunks: Infinity // 这里取值必须是Infinity,表示只会打vendow对应的包，不会打其他的代码
        }
      }
    },
    // 提取 webpack runtime
    runtimeChunk: {
      "name": "manifest"
    }
  }
}

/**
 * 长缓存优化
 * 1.独立打包vendor
 * 2.抽出manifest（webpack runtime）
 * 3.使用NamedChunksPlugin
 * 4.使用NamedModulesPlugin
 * 5.动态模块给定模块名称
*/